<template>
  <view class="EveryDayUserHead">
    <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/improve/user-bg.png" class="bg"></image>
    <view class="user-info ">
      <view class="flex between item-center">
        <view class="flex f_1">
          <image :src="loginData.avatar" class="img_bg" />
          <view class="user-account flex flex-column around f_1">
            <view class="nickname flex flex-row item-center">
              <text class="line-1">{{ loginData.nickName || "--" }}</text>
              <label class="fs_0">VIP</label>
            </view>
            <view>{{ loginData.phone }}</view>
          </view>
        </view>
        <view class="score fs_0" v-if="!isHistory">
          <view>{{ userPracticeInfo.scoreInt ? userPracticeInfo.scoreInt : 0 }}<label>分</label></view>
          <view>(总分{{ userPracticeInfo.totalScore ? userPracticeInfo.totalScore : 0 }}分)</view>
        </view>
      </view>
      <view class="statistics flex" v-if="!isHistory">
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.cutTime ? userPracticeInfo.cutTime : 0 }}</text>
          <label>切屏</label>
        </view>
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.answerNum ? userPracticeInfo.answerNum : 0 }}</text>
          <label>答题</label>
        </view>
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.correctRate ? userPracticeInfo.correctRate : 0 }}%</text>
          <label>正确率</label>
        </view>
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.answerTime ? userPracticeInfo.answerTime : 0 }}</text>
          <label>用时</label>
        </view>
      </view>
      <view class="historyStatistics flex" v-if="isHistory && practiceType != '2'">
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.score ? userPracticeInfo.score : 0 }}</text>
          <label>得分</label>
        </view>
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.no ? userPracticeInfo.no : 0 }}</text>
          <label>排名</label>
        </view>
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.pass ? '合格' : '不合格' }}</text>
          <label>成绩</label>
        </view>
      </view>
      <view class="historyStatistics flex" v-if="isHistory && practiceType == '2'">
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.answerNum ? userPracticeInfo.answerNum : 0 }}</text>
          <label>答题</label>
        </view>
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.rate ? `${userPracticeInfo.rate}%` : 0 }}</text>
          <label>正确率</label>
        </view>
        <view class="flex flex-column">
          <text>{{ userPracticeInfo.avgNum ? userPracticeInfo.avgNum : 0 }}</text>
          <label>练习次数</label>
        </view>
      </view>
    </view>
  </view>

</template>

<script>

export default {
  name: "EveryDayUserHead",
  props: {
    userPracticeInfo: Object,
    isHistory: Boolean,
    type: String, // historyPractice - 历史练习
    practiceType: String
  },
  data() {
    return {
      loginData: {},
    }
  },
  created() {
    if (uni.getStorageSync('appKey')) {
      this.loginData = {
        ...uni.getStorageSync('loginData'),
      };
    }
  },
}
</script>

<style scoped lang="scss">
.EveryDayUserHead {
  position: relative;
  height: 168px;

  .bg {
    width: 100%;
    height: 100%;
  }

  .user-info {
    padding: 0 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 32px);
    margin-top: 16px;

    image {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 16px;
    }

    .user-account {
      color: #FFFFFF;
      font-size: 14px;

      .nickname {
        font-size: 16px;

        label {
          padding: 1px 5px;
          background-color: #EED682;
          color: #A86C12;
          font-size: 10px;
          margin-left: 9px;
          border-radius: 4px;
          height: fit-content;
        }
      }
    }

    .score {
      color: #fff;

      >view:nth-child(1) {
        font-size: 24px;
        text-align: center;

        label {
          font-size: 12px;
        }
      }

      >view:nth-child(2) {
        font-size: 10px;
      }
    }



    .statistics {
      color: #FFFFFF;
      font-size: 14px;
      margin-left: 77px;
      margin-top: 15px;

      >view {
        margin-right: 20px;

        label {
          font-size: 12px;
        }
      }

    }

    .historyStatistics {
      color: #FFFFFF;
      font-size: 14px;
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
      padding: 0 50px;

      >view {

        text {
          font-size: 16px;
          font-weight: bold;
        }

        label {
          font-size: 14px;
        }
      }
    }
  }
}
</style>